<template>
  <view class="info-container" v-if="info">
    <h1>预约信息</h1>
    <view class="info">
      <view class="id">
        <text>预约号</text>
        <p>{{ info.id }}</p>
      </view>
      <view class="room">
        <text>房间名</text>
        <p>{{ info.roomName }}</p>
      </view>
      <view class="allowingTime">
        <text>使用时间</text>
        <p> {{ getUsingTime }}</p>
      </view>
      <view class="applicationTime">
        <text>申请时间</text>
        <p>{{ getApplyTime }}</p>
      </view>
      <view class="status">
        <text>当前状态</text>
        <p>申请成功</p>
      </view>
    </view>
    <view class="qrCode">
      <canvas id="qrcode" canvas-id="qrcode" style="width: 150px; height: 150px; margin: 0 auto"></canvas>
    </view>
  </view>
</template>

<script>
import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
import { getReservationDetailsAsync } from '@/api/reservation'
export default {
  data () {
    return {
      // 将预约信息接口数据全部传入qrData
      qrData: { id: 7624, roomid: 222 }, // 用于存储输入的信息,
      info: '' //详情信息
    };
  },
  onLoad (options) {
    this.getReservationDetails(options.id)

    console.log('%c [  ]-44', 'font-size:13px; background:pink; color:#bf2c9f;', options)
    this.generateQRCode()
  },
  methods: {
    async generateQRCode () {
      // 获取uQRCode实例
      var qr = new UQRCode();
      // 设置二维码内容
      qr.data = JSON.stringify(this.qrData);
      // 设置二维码大小，必须与canvas设置的宽高一致
      qr.size = 150;
      // 调用制作二维码方法
      qr.make();
      // 获取canvas上下文
      var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
      // 设置uQRCode实例的canvas上下文
      qr.canvasContext = canvasContext;
      // 调用绘制方法将二维码图案绘制到canvas上
      qr.drawCanvas();
    },
    async getReservationDetails (id) {
      const res = await getReservationDetailsAsync(id)
      console.log('%c [  ]-68', 'font-size:13px; background:pink; color:#bf2c9f;', res)
      this.info = res.data.data
      this.qrData = this.info
    }
  },
  computed: {
    getUsingTime () {
      return this.info.date + " " + this.info.startTime + "-" + this.info.endTime
    },
    getApplyTime () {
      const arr = this.info.createTime?.toString().split('T')
      return arr?.[0] + " " + arr?.[1]
    }

  }
};
</script>

<style lang="scss">
.info-container {
  background-color: #fff;

  h1 {
    color: #0c75ff;
    font-weight: 700;
    font-size: 36rpx;
    height: 60rpx;
    line-height: 60rpx;
    padding: 20rpx 40rpx 10rpx;

    border-bottom: 1rpx solid #e2e2e2;
  }

  .info {
    padding: 20rpx 60rpx;
    font-size: 30rpx;
    color: #959595;

    view {
      $height: 50rpx;
      display: flex;
      line-height: $height;

      text {
        flex: 1;
        font-weight: 700;
        color: #303030;
      }

      p {
        font-size: 28rpx;
        width: 70%;
        flex-wrap: wrap;
      }
    }
  }

  .qrCode {
    box-sizing: border-box;
    height: 500rpx;
    padding: 60rpx 0;

    .qrcode {
      margin-top: 40rpx;
    }
  }
}
</style>
